<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        
    </style>
</head>
<body>
    <div id="app">
        我叫{{ name }}，今年{{age}}岁，性别 {{ sex }}
    </div>
</body>
<script>
    
    function Vue(ops={}){
        let {data={}, el=""} = ops;
        // 选择器
        el = document.querySelector(el);
        // 判断选择器是否选中元素
        if(el === null){
            // console.error("选择器传输错误，没有选择到指定元素")
            // return 
            throw new Error("选择器传输错误，没有选择到指定元素");
        }
        // 提前获取元素内容，以备后用
        let content = el.innerHTML;

        // 封装渲染DOM的方法
        function render(data, el, content){
            // 准备数组，存储要替换的 "{{数据}}"
            let arr = [];
            // 遍历传入的数据
            for(let i in data){
                // 根据数据的键，创建正则
                const reg = new RegExp("{{ *" + i + " *}}", "g");
                // 存储通过正则获取到的所有的 "{{数据}}"
                arr.push(...content.match(reg));
            }
            // 遍历所有的 "{{数据}}"
            arr.forEach(val=>{
                // 拿出 "{{数据}}"内的"数据名"，用于获取对象中对应的属性
                const key = val.match(/\w+/)[0];
                // 替换并修改DOM元素内容
                content = content.replace(val, data[key]);
            })
            // 将处理之后的内容设置到元素
            el.innerHTML = content;
        }

        // 执行DOM渲染
        render(data, el, content);

        // 开始代理数据
        return new Proxy(data, {
            get(target, property){
                return target[property];
            },
            set(target, property, value){
                target[property] = value;
                // 当数据被修改后，重新渲染DOM
                render(target, el, content);
            }
        })
    }
    
    const result = Vue({
        el:"#app",
        data:{
            name:"张三",
            age:18,
            sex:"男"
        }
    })

    console.log(result);

</script>
</html>